<%--
  Created by IntelliJ IDEA.
  User: bin.liu
  Date: 2019/6/25
  Time: 14:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<style>
    .deleteImg {
        width: 20px;
        position: relative;
        top: -40px;
        /*left: 100px;*/
        cursor: pointer;
        display: none;
    }

    .startImg {
        width: 100px;
        height: 100px;
    }
</style>

<div class="main-content">
    <div class="box box-main">
        <form id="taskOrderForm" model="post" action="<c:url value="/web/admin/taskOrder/addOrUpdate.action"/>"
              enctype="multipart/form-data"
              method="post" class="form-horizontal">
            <div class="box-body">
                <div class="form-unit">基本信息</div>
                <input type="hidden" name="id" value="${taskOrder.id}"/>
                <input type="hidden" name="serial" value="${taskOrder.serial}"/>
                <input type="hidden" name="taskAssignTypeEnum" value="${taskOrder.taskAssignTypeEnum}"/>
                <input type="hidden" name="auditLevel" value="${taskOrder.auditLevel}"/>
                <input type="hidden" name="assign" value="${taskOrder.assign}"/>
                <input type="hidden" name="level" value="${taskOrder.level}"/>
                <input type="hidden" name="flow" value="${taskOrder.flow}"/>
                <input type="hidden" name="flowName" value="${taskOrder.flowName}"/>
                <input type="hidden" name="recording" value="${taskOrder.resource.id}"/>
                <input type="hidden" name="taskOrderStatus" value="${taskOrder.taskOrderStatus}"/>
                <input type="hidden" name="workingHours" value="${taskOrder.workingHours}"/>
                <input type="hidden" name="totalWorkingHours" value="${taskOrder.totalWorkingHours}"/>
                <input type="hidden" name="receiveUserId" value="${taskOrder.receiveUser.id}"/>
                <input type="hidden" name="createDate1"
                       value="<fmt:formatDate value="${taskOrder.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                任务来源：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <input id="taskSourceEnum" value="内部发布" readonly="readonly"
                                       class="form-control required">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required">*</span>工单名称：</label>
                            <div class="col-sm-8">
                                <input id="orderName" name="orderName" value="${taskOrder.orderName}"
                                       class="form-control required">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                任务类型：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <input id="selectTaskTypeId" name="selectTaskTypeId"
                                       class="form-control required">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                任务发布人：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <input id="selectUserId" name="selectUserId" class="form-control required">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                要求完成时间：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <input name="requireFinishTime1" id="requireFinishTime1" value="<fmt:formatDate value="${taskOrder.requireFinishTime}" pattern="yyyy-MM-dd HH:mm"/>"
                                       class="form-control Wdate" autoComplete="off">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4"><span class="required">*</span>任务内容：</label>
                            <div class="col-sm-8 controls">
                                <textarea htmlEscape="false" rows="4" maxlength="400" name="taskContent"
                                          class="form-control required">${taskOrder.taskContent}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                任务地址：<i class="fa icon-question hide"></i>
                            </label>
                            <div class="col-sm-8">
                                    <textarea htmlEscape="false" rows="4" maxlength="400" name="taskAddress" id="taskAddress"
                                                        class="form-control ">${taskOrder.taskAddress}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-2" title="">
                                任务照片：<i class="fa icon-question hide"></i>
                            </label>
                            <div class="col-sm-8">
                                <div>
                                    <img class="startImg" id="img1" src="<c:url value="/resources/images/2.png" />"
                                         onclick="$('#pic1').click();"/>
                                    <img class="deleteImg" id="delete1"
                                         src="<c:url value="/resources/images/delete.png"/>"
                                         onclick="deleteImg(1)"/>
                                    <input type="file" style="display: none;" name="pic1" id="pic1"
                                           onchange="getImgLoad(1)"/>
                                    <input type="hidden" id="sImg1" name="sImg1" value="0"/><%--判断有没有变更图片用的 变了就为1 不变就为0--%>

                                    <img class="startImg" id="img2" src="<c:url value="/resources/images/2.png" />"
                                         onclick="$('#pic2').click();"/>
                                    <img class="deleteImg" id="delete2"
                                         src="<c:url value="/resources/images/delete.png"/>"
                                         onclick="deleteImg(2)"/>
                                    <input type="file" style="display: none;" name="pic2" id="pic2"
                                           onchange="getImgLoad(2)"/>
                                    <input type="hidden" id="sImg2" name="sImg2" value="0"/><%--判断有没有变更图片用的 变了就为1 不变就为0--%>

                                    <img class="startImg" id="img3" src="<c:url value="/resources/images/2.png" />"
                                         onclick="$('#pic3').click();"/>
                                    <img class="deleteImg" id="delete3"
                                         src="<c:url value="/resources/images/delete.png"/>"
                                         onclick="deleteImg(3)"/>
                                    <input type="file" style="display: none;" name="pic3" id="pic3"
                                           onchange="getImgLoad(3)"/>
                                    <input type="hidden" id="sImg3" name="sImg3" value="0"/><%--判断有没有变更图片用的 变了就为1 不变就为0--%>

                                    <img class="startImg" id="img4" src="<c:url value="/resources/images/2.png" />"
                                         onclick="$('#pic4').click();"/>
                                    <img class="deleteImg" id="delete4"
                                         src="<c:url value="/resources/images/delete.png"/>"
                                         onclick="deleteImg(4)"/>
                                    <input type="file" style="display: none;" name="pic4" id="pic4"
                                           onchange="getImgLoad(4)"/>
                                    <input type="hidden" id="sImg4" name="sImg4" value="0"/><%--判断有没有变更图片用的 变了就为1 不变就为0--%>

                                    <img class="startImg" id="img5" src="<c:url value="/resources/images/2.png" />"
                                         onclick="$('#pic5').click();"/>
                                    <img class="deleteImg" id="delete5"
                                         src="<c:url value="/resources/images/delete.png"/>"
                                         onclick="deleteImg(5)"/>
                                    <input type="file" style="display: none;" name="pic5" id="pic5"
                                           onchange="getImgLoad(5)"/>
                                    <input type="hidden" id="sImg5" name="sImg5" value="0"/><%--判断有没有变更图片用的 变了就为1 不变就为0--%>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                任务区域：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <input id="selectAreaId" name="selectAreaId" class="form-control ">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">完成审批流：<i class="fa icon-question hide"></i>
                            </label>
                            <div class="col-sm-8">
                                <input id="selectCompleteAuditFlowId" name="selectCompleteAuditFlowId" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    所属企业：<i class="fa icon-question hide"></i></label>
                                <label class="control-label col-sm-8" style="text-align: left" title="">
                                    ${enterprise.enterpriseName}<i class="fa icon-question hide"></i></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box-footer">
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i>保 存</button>&nbsp;
                        <button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="closeView()"><i class="fa fa-times"></i> 关 闭</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $("#taskOrderForm").validate({
        submitHandler: function (form) {
            js.ajaxSubmitForm($(form), function (data) {
                js.showMessage(data.msg);
                if (data.status == Global.NO) {
                    closeView();
                    $('#dataGrid').dataGrid("refresh");
                }
            }, "json");
        }
    });

    $("#requireFinishTime1").datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        language:'zh-CN',
        minuteStep:1,
        autoclose:true,//选中关闭
        todayBtn: true//今日按钮
    });

    //初始化显示图片
    $(document).ready(function () {
        if (${img1!=""}) {
            $("#img1").attr("src", "${img1}");
            $("#delete1").show();
        }
        if (${img2!=""}) {
            $("#img2").attr("src", "${img2}");
            $("#delete2").show();
        }
        if (${img3!=""}) {
            $("#img3").attr("src", "${img3}");
            $("#delete3").show();
        }
        if (${img4!=""}) {
            $("#img4").attr("src", "${img4}");
            $("#delete4").show();
        }
        if (${img5!=""}) {
            $("#img5").attr("src", "${img5}");
            $("#delete5").show();
        }
    });

    function deleteImg(id) {
        $("#sImg" + id).val('1');//表示图片变更了（或者删掉了 总之不是原来的图片了）
        $("#pic" + id).val('');
        $("#img" + id).attr("src", "<c:url value="/resources/images/2.png" />");
        $("#delete" + id).hide();
    }

    function getImgLoad(id) {
        var obj = document.getElementById("pic" + id);
        var stuff = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3];
        console.log(stuff);
        if (stuff != 'jpg' && stuff != 'png' && stuff != 'jpeg') {
            alert('图片类型不正确');
            return false;
        }
        //判断图片
        if (stuff == 'jpg' || stuff == 'png' || stuff == 'jpeg') {
            var file = document.getElementById("pic" + id).files[0];
            var reader = new FileReader();
            reader.onload = function (event) {
                if (!/image\/\w+/.test(file.type)) {
                    alert("文件必须为图片！");
                    return false;
                }
                src = event.target.result;
                $("#img" + id).attr("src", src);
            };
            reader.readAsDataURL(file);
        }
        $("#sImg" + id).val('1');//表示图片变更了（总之不是原来的图片了）
        $("#delete" + id).show();
    }

    function closeView() {
        layer.close(LayWin['wTaskOrder']);
    }

    var selectTaskTypeId = $('#selectTaskTypeId').magicSuggest({
        allowFreeEntries: false,
        data: '<c:url value="/web/admin/dictInfo/getDictInfoListMagic.action?typeCode=TASK_TYPE" />',
        queryParam: 'q',
        valueField: "value",
        displayField: "text",
        maxSelection: 1,
        noSuggestionText: '',
        placeholder: '请选择',
        required: true,
        autoSelect: true,
        selectFirst: true,
        value: magicSuggestValue('${taskOrder.orderType.id}')
    });

    var selectUserId = $('#selectUserId').magicSuggest({
        allowFreeEntries: false,
        data: '<c:url value="/web/admin/systemUser/getUserListMagic.action?id=${taskOrder.createUser.id}" />',
        queryParam: 'q',
        valueField: "value",
        displayField: "text",
        maxSelection: 1,
        noSuggestionText: '',
        placeholder: '请选择',
        required: true,
        autoSelect: true,
        selectFirst: true,
        value: magicSuggestValue('${taskOrder.createUser.id}')
    });

    var selectAreaId = $('#selectAreaId').magicSuggest({
        allowFreeEntries: false,
        data: '<c:url value="/web/admin/area/getAreaSelect.action?id=${taskOrder.taskArea.id}" />',
        queryParam: {},
        valueField: "value",
        displayField: "text",
        maxSelection: 1,
        noSuggestionText: '',
        placeholder: '请选择',
        required: true,
        autoSelect: true,
        selectFirst: true,
        value: magicSuggestValue('${taskOrder.taskArea.id}')
    });

    $(selectAreaId).on('selectionchange', function (e, m) {
        validateMagicReload();
    });

    var selectCompleteAuditFlowId = $('#selectCompleteAuditFlowId').magicSuggest({
        allowFreeEntries: false,
        data: '<c:url value="/web/admin/auditFlow/getAuditFlowSelect.action?type=complete&&flag=0" />',
        queryParam: 'q',
        valueField: "value",
        displayField: "text",
        maxSelection: 1,
        noSuggestionText: '',
        placeholder: '请选择',
        required: true,
        autoSelect: true,
        selectFirst: true,
        value: magicSuggestValue('${taskOrder.auditFlow.id}')
    });

</script>
